<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link href="../src/css/layui.css" rel="stylesheet">
    <style>
    .login-main {
      background: url("./image/black_dot.png") 0% 0% / 14px 14px repeat;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .login-intro {
      position: absolute;
      left: 40px;
      top: 30%;
      max-width: 600px;
    }

    .login-intro h1 {
      color: #fff;
      font-size: 60px;
      font-weight: bold;
    }

    .login-intro p {
      opacity: .8;
      font-size: 24px;
      color: #fff;
      margin: 12px auto 30px;
      text-align: left;
    }

    @keyframes slashStar{0%{opacity:1}to{opacity:0}}

    .animation {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #1be1f6;
    }

    .animation1 {
      left: 15%;
      top: 70%;
      animation: slashStar 2s ease-in-out .3s infinite;
    }

    .animation2 {
      left: 34%;
      top: 35%;
      animation: slashStar 2s ease-in-out 1.2s infinite;
    }

    .animation3 {
      left: 53%;
      top: 20%;
      animation: slashStar 2s ease-in-out .5s infinite;
    }

    .animation4 {
      left: 72%;
      top: 64%;
      animation: slashStar 2s ease-in-out .8s infinite;
    }

    .animation5 {
      left: 87%;
      top: 30%;
      animation: slashStar 2s ease-in-out 1.5s infinite;
    }

    .login-box {
      position: absolute;
      right: 40px;
      width: 480px;
      top: 15%;
      background: #fff;
      border-radius: 4px;
      padding: 60px;
      box-sizing: border-box;
      box-shadow: 0 5px 15px -5px rgb(0 0 0 / 50%);
    }

    .login-box h1 {
      text-align: center;
      margin-bottom: 40px;
    }

    .login-box input, .login-box button {
      height: 60px;
      margin-top: 30px;
    }


    </style>
</head>
<body>
<!-- HTML -->
<div class="login-main">
    <div class="login-intro">
        <h1>INTRO.</h1>
        <p>an easy-to-use dynamic service discovery, configuration and service management platform for building cloud
            native applications</p>
    </div>
    <div class="animation animation1"></div>
    <div class="animation animation2"></div>
    <div class="animation animation3"></div>
    <div class="animation animation4"></div>
    <div class="animation animation5"></div>
    <div class="login-box">
        <h1>登录</h1>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">登录</button>
            </div>
        </form>
    </div>
</div>
<script src="../src/layui.js"></script>
<script>
// 使用组件
layui.use(['form'], function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});


</script>
</body>
</html>